<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>WebControl</title>
    <meta charset="UTF-8">
    <style>
        body {
            background-color: #f0f2f5;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 1.42857143;
            color: #58666e;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .login-container {
            text-align: center;
            width: 100%;
            max-width: 300px; /* 可根据需要调整宽度 */
            display: flex; /* 可选，用于更精细的布局控制 */
            flex-direction: column; /* 如果需要垂直布局，可以保留或移除 */
        }

        .login-container label{
            text-decoration: none; /* 去除下划线 */
            color: #282c2f;
        }
        
        .login-container input[type="password"] {
            display: inline-block; /* 通常是默认行为，但明确设置可以避免潜在问题 */
            width: calc(100% - 50px); /* 根据 a 标签的 padding 调整宽度，确保总宽度不超过容器 */
            padding: 10px;
            box-sizing: border-box; /* 确保宽度包括内边距和边框 */
        }

        .login-container button {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50; /* 绿色背景 */
            color: white; /* 白色文字 */
            border: none; /* 去除边框 */
            cursor: pointer; /* 鼠标悬停时显示手型 */
        }

        .login-container button:hover {
            background-color: #45a049; /* 鼠标悬停时改变背景色 */
        }
    </style>
</head>
<body>

{% if password != None and istrue == True %}
<p>登录成功</p>
{% else %}
{% if password != None and istrue == False %}
<script type="text/javascript">
alert("登录失败！！");
</script>
{% endif %}
<div class="login-container">
    <form action="/login" method="post">
        <label for="password">密码：</label>
        <input type="password" name="password" placeholder="请输入密码" required>
        <button type="submit">登录</button>
    </form>
</div>
{% endif %}

</body>
</html>